<template>
  <el-dialog
    v-model="editDialogVisible"
    title="编辑用户"
    width="60%"
    center
    @close="closeEditDialog(false)"
  >
    <el-form
      :rules="rules"
      :model="form"
      label-width="100px"
      ref="validateForm"
    >
      <el-form-item label="分类名" prop="category_name">
        <el-input v-model="form.category_name" />
      </el-form-item>
      <el-form-item label="分类描述" prop="category_description">
        <el-input v-model="form.category_description" />
      </el-form-item>
      <el-form-item label="分类图片" prop="category_pic">
        <el-upload
          class="avatar-uploader"
          :action="uploadURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <!-- 这里不要使用默认的,默认的close不是响应式的 -->
        <el-button
          @click="
            () => {
              closeEditDialog(false)
            }
          "
        >
          取消
        </el-button>
        <el-button type="primary" @click="submitEdit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from 'vue'
import axios from 'axios'
//2.根据商品ID查询要编辑的商品数据的方法
function useLoadEditData(state) {
  axios.get(`/category/only/${state.CategoryId}`).then((res) => {
    console.log(res.data.result.data)
    state.form = res.data.result.data
    state.form.category_pic = res.data.result.data.category_pic
    state.imageUrl =
      import.meta.env.VITE_APP_URL + '/' + res.data.result.data.category_pic
  })
}
//提交编辑好的文章
function useEditData(state, validateForm, emit) {
  const submitEdit = () => {
    //验证表单的值都填完没有
    validateForm.value.validate((valid) => {
      //console.log(valid) //如果有没填的就是false,都填了就是true
      //获取表单数据
      //console.log(state.CategoryId)
      if (valid) {
        const obj = {
          category_name: state.form.category_name,
          category_description: state.form.category_description,
          category_pic: state.form.category_pic,
        }
        //console.log('数据', obj)
        axios.put(`/category/${state.CategoryId}`, obj).then((res) => {
          console.log(res)
          // // 关闭表单
          emit('onCloseEditDialog', false, res.data)
        })
      }
    })
  }
  return {
    submitEdit,
  }
}
//
export default {
  props: {
    editDialogVisible: Boolean,
    CategoryId: Number,
  },
  emits: ['onCloseEditDialog'],
  setup(props, { emit }) {
    const validateForm = ref()
    const pic = ref()
    const state = reactive({
      editDialogVisible: props.editDialogVisible,
      CategoryId: props.CategoryId,
      uploadURL: import.meta.env.VITE_APP_URL + '/upload',
      imageUrl: '',
      form: {
        category_name: '',
        category_description: '',
        category_pic: '',
      },
    })
    // 上传成功以后的处理函数
    const handleAvatarSuccess = (response) => {
      state.imageUrl = import.meta.env.VITE_APP_URL + '/' + response.msg
      pic.value = response.msg
      //console.log('图片', pic.value)
      state.form.category_pic = response.msg
      //console.log(state.form.category_pic)
    }
    const closeEditDialog = (visible) => {
      // 使用父组件的方法,方法名,传递的参数
      emit('onCloseEditDialog', visible)
    }
    // 校验规则
    const rules = {
      category_name: [
        { required: true, message: '分类名不能为空', trigger: 'blur' },
      ],
      category_description: [
        { required: true, message: '分类描述不能为空', trigger: 'blur' },
      ],
      category_pic: [
        { required: true, message: '文章图片不能为空', trigger: 'blur' },
      ],
    }

    // 接收要打印的文章编号
    onMounted(() => {
      //console.log('用户Id', state.CategoryId)
      //1.挂载的时候,根据用户ID查询要编辑的商品数据
      useLoadEditData(state)
    })
    return {
      ...toRefs(state),
      ...useEditData(state, validateForm, emit),
      closeEditDialog,
      rules,
      handleAvatarSuccess,
      validateForm,
    }
  },
}
</script>

<style></style>
